﻿@model HomeControllerModel.Index
<div class="container-12  clearfix m-tb-5 p-tb-5 placeholder">
    <div class="grid-12">
    </div>
    <div class="clear">
    </div>
    <div class="grid-11">
    </div>
    <div class="grid-1">
    </div>
    <div class="clear">
    </div>
</div>
<div class="container-16  clearfix m-tb-5 p-tb-5 placeholder">
    <div class="grid-16">
    </div>
    <div class="grid-14">
        f
    </div>
    <div class="grid-2">
        f
    </div>
</div>
<div class="container-24 m-tb-5 product">
    <div class="grid-5">
        <div class="col-sub">
            <dl>
                <dt></dt>
                <dd>
                    <ul>
                        @foreach (var category in Model.ProductCategories)
                        {
                            <li>@category.Name</li>
                        }
                    </ul>
                </dd>
            </dl>
            <div class="box">
                <div class="shop-info">
                </div>
            </div>
            <div class="box">
                <div class="shop-search">
                </div>
            </div>
            <div class="box">
                <div class="shop-customer no-border">
                </div>
            </div>
            <div class="box">
                <div class="shop-category">
                </div>
            </div>
            <div class="box">
                <div class="shop-link">
                </div>
            </div>
        </div>
    </div>
    <div class="grid-19">
        <div class="col-main">
            <div class="detail clearfix">
                <div class="grid-8 alpha margin-top-none">
                    <div class="gallery">
                        <div class="picture">
                            <a href="http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                class="item-gallery" rel='gallery' title="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色">
                                <img src="http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                    alt="" />
                            </a>
                            <div class="zoom-icon">
                            </div>
                        </div>
                        <div id="item-gallery-thumb">
                            <div class="slides-container">
                                <div class="thumb clearfix">
                                    <a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg',largeimage: 'http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg'}">
                                        <img src="http://img12.360buyimg.com/n5/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/3538/023399f8-376d-45af-b2d3-57c464952563.jpg',largeimage: 'http://img12.360buyimg.com/n0/3538/023399f8-376d-45af-b2d3-57c464952563.jpg'}">
                                        <img onerror="this.src='http://www.360buy.com/images/none/none_50.gif'" src="http://img12.360buyimg.com/n5/3538/023399f8-376d-45af-b2d3-57c464952563.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg',largeimage: 'http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg'}">
                                        <img src="http://img12.360buyimg.com/n5/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/3538/023399f8-376d-45af-b2d3-57c464952563.jpg',largeimage: 'http://img12.360buyimg.com/n0/3538/023399f8-376d-45af-b2d3-57c464952563.jpg'}">
                                        <img onerror="this.src='http://www.360buy.com/images/none/none_50.gif'" src="http://img12.360buyimg.com/n5/3538/023399f8-376d-45af-b2d3-57c464952563.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg',largeimage: 'http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg'}">
                                        <img src="http://img12.360buyimg.com/n5/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                </div>
                                <div class="thumb clearfix">
                                    <a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg',largeimage: 'http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg'}">
                                        <img src="http://img12.360buyimg.com/n5/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/3538/023399f8-376d-45af-b2d3-57c464952563.jpg',largeimage: 'http://img12.360buyimg.com/n0/3538/023399f8-376d-45af-b2d3-57c464952563.jpg'}">
                                        <img onerror="this.src='http://www.360buy.com/images/none/none_50.gif'" src="http://img12.360buyimg.com/n5/3538/023399f8-376d-45af-b2d3-57c464952563.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg',largeimage: 'http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg'}">
                                        <img src="http://img12.360buyimg.com/n5/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/3538/023399f8-376d-45af-b2d3-57c464952563.jpg',largeimage: 'http://img12.360buyimg.com/n0/3538/023399f8-376d-45af-b2d3-57c464952563.jpg'}">
                                        <img onerror="this.src='http://www.360buy.com/images/none/none_50.gif'" src="http://img12.360buyimg.com/n5/3538/023399f8-376d-45af-b2d3-57c464952563.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                    <a href='javascript:void(0);' rel="{gallery: 'gallery', smallimage: 'http://img12.360buyimg.com/n1/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg',largeimage: 'http://img12.360buyimg.com/n0/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg'}">
                                        <img src="http://img12.360buyimg.com/n5/1587/69fbd371-c9bd-406b-98cc-fe195b9a3a3c.jpg"
                                            width="50" height="50" alt="尼康（Nikon） D3100 单反套机（AF-S DX 18-55mm f/3.5-5.6G VR尼克尔镜头）黑色" /></a>
                                </div>
                            </div>
                        </div>
                        <div class="action">
                            <div class="placeholder">
                                asdfasf</div>
                        </div>
                    </div>
                </div>
                <div class="grid-11 omega margin-top-none">
                    <div class="property">
                        <div class="item-meta">
                            <p>
                                价格：<span class="item-price">@Model.Product.UnitPrice</span></p>
                        </div>
                        <div class="item-attribute">
                            @if (Model.Product.ProductSaleAttributesInfo != null)
                            {
                                foreach (var o in Model.Product.ProductSaleAttributesInfo)
                                {
                                <dl class="clearfix">
                                    <dt>@(o.Text) :</dt>
                                    <dd>
                                        <ul>
                                            @foreach (var v in o.Values)
                                            {
                                                if (Model.Product.Dimension == ProductDimension.One)
                                                {
                                                <li data-namecode="@(o.Code)" data-valuecode="@(v.Key)" class="@(Model.SelectedAttributes.Contains(v.Key) ? "item-selected" : string.Empty)">
                                                    <a href="javascript:void(0);"><span>@v.Value</span> </a>
                                                    @if (Model.SelectedAttributes.Contains(v.Key))
                                                    {
                                                        <i>已选中</i>
                                                    }
                                                </li>
                                                }
                                                else
                                                {
                                                <li data-namecode="@(o.Code)" data-valuecode="@(v.Key)" ><a href="javascript:void(0);">
                                                    <span>@v.Value</span> </a></li>
                                                }
                                            }
                                        </ul>
                                    </dd>
                                </dl>
                                }
                            }
                            <dl>
                                <dt>数 量：</dt><dd>
                                    <input id="item-quantity" class="tb-text" type="text" title="请输入购买量" maxlength="3"
                                        value="1" />
                                    件 <em>(库存 <span id="item-stock" class="item-stock">@(Model.Product.ProductVariants.Sum(o => o.VariantQuantity))</span>
                                        件) </em>
                                </dd>
                            </dl>
                        </div>
                        <div>
                            <div class="item-btn-add">
                                <a href="javascript:void(0);">加入购物车</a></div>
                            <div class="item-btn-buy">
                                <a>立刻购买</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item-detail">
            <ul class="item-tabs">
                <li class="section active"><a href="javascript:void(0);" class="trigger">商品介绍</a>
                    <div class="panel">
                        @Model.Product.ProductExtra.FullDescription
                    </div>
                </li>
                <li class="section"><a href="javascript:void(0);" class="trigger">规格参数</a>
                    <div class="panel">
                        <ul>
                            @foreach (var a in Model.Product.ProductAttributesInfo)
                            {
                                <li><span>@(a.Name) :</span><span>@(a.Value) </span></li>
                            }</ul>
                    </div>
                </li>
                <li class="section"><a href="javascript:void(0);" class="trigger">包装清单</a>
                    <div class="panel">
                        面板3
                    </div>
                </li>
                <li class="section"><a href="javascript:void(0);" class="trigger">售后服务</a>
                    <div class="panel">
                        面板4
                    </div>
                </li>
                <li class="section"><a href="javascript:void(0);" class="trigger">专业评测</a>
                    <div class="panel">
                        面板5
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="clear">
    </div>
</div>
@*<div class="cart-box placeholder"><div class="cart-box-content">asfasd</div><div class="cart-box-shadow">sdsdg</div></div>
*@@section js
{
    @Url.Sk().StaticJs("jquery.slides.min")
    @Url.Sk().StaticJs("jquery.jqzoom.pack")
    <script id="login-tmpl" type="text/x-jquery-tmpl">     
     <div class="sk-passport-login">
      @LoginHelper.GetHtml()
     </div>
    </script>
    <script src="/@(Model.Product.Id).js" type="text/javascript"></script>
    <script type="text/javascript">
        var item = itemInfo || {};
        $(function () {
            $(".item-attribute dl dd ul li").click(function () {
                var target = this;
                var price = item.Price;
                var quantity = item.Stock;

                if ($(target).hasClass("item-out-of-stock"))
                    return false;
                if ($(target).hasClass("item-selected")) {
                    $(".item-price").text(price);
                    $(".item-stock").text(quantity);

                    $(target).children("i").remove();
                    $(target).removeClass("item-selected");

                }
                else {
                    $(target).addClass("item-selected");
                    $(target).append("<i>已选中</i>");

                    var namecode = $(target).attr("data-namecode");
                    var valuecode = $(target).attr("data-valuecode");

                    var other = $(target).parent().children().not(target);
                    $.each(other, function (i, n) {
                        $(n).children("i").remove();
                        $(n).removeClass("item-selected");
                    });
                    var subAttrs = $.Enumerable.From(item.VariantAttributes).Where(function (o) {
                        return o.Key == valuecode;
                    }).FirstOrDefault();
                    if (subAttrs != undefined && subAttrs != null) {
                        subAttrs = subAttrs.Value;
                        var list = $(".item-attribute li[data-namecode!='" + namecode + "']");
                        $.each(list, function (i, n) {
                            var code = $(n).attr("data-valuecode");
                            if ($.inArray(code, subAttrs) == -1) {
                                $(n).addClass("item-out-of-stock");
                            }
                            else {
                                $(n).removeClass("item-out-of-stock");
                            }
                        });
                    }
                    //更新价格 库存
                    if (item.Dimension == 1) {
                        var x = $.Enumerable.From(item.Variants).Where(function (o) {
                            return o.Code == valuecode;
                        }).FirstOrDefault();
                        if (x != undefined && x != null) {
                            price = x.Price;
                            quantity = x.Quantity;
                        }
                        //console.log(x);
                    }
                    else if (item.Dimension == 2) {
                        var selecteds = $(".item-attribute li[class='item-selected']");
                        if (selecteds.length != 2) {
                            return false;
                        } else {
                            var tempId = [];
                            $.each(selecteds, function (i, n) {
                                var code = $(n).attr("data-valuecode");
                                tempId.push(code);
                            });
                            var z = tempId.toString();
                            var y = $.Enumerable.From(item.Variants).Where(function (o) {
                                return o.Code == z;
                            }).FirstOrDefault();
                            //console.log(y);
                            if (y != undefined && y != null) {
                                price = y.Price;
                                quantity = y.Quantity;
                            }
                        }
                    }
                    $(".item-price").text(price);
                    $(".item-stock").text(quantity);
                }
                return false;
            });

            $(".item-btn-add a").click(function () {
                if (Sk.CurrentUser.IsAuthenticated == false) {
                    Sk.Passport.Fun.login();
                    return false;
                }
                var stock = 0;
                var id = item.Id;
                var guid = item.Variants[0].Id;
                var quantity = parseInt($("#item-quantity").val()) || 1;
                if (item.Dimension == 0) {
                    stock = item.Variants[0].Quantity;
                }
                if (item.Dimension == 1) {
                    var valuecode = $(".item-attribute li[class='item-selected']").first().attr("data-valuecode");
                    var x = $.Enumerable.From(item.Variants).Where(function (o) {
                        return o.Code == valuecode;
                    }).FirstOrDefault();
                    if (x != undefined && x != null) {
                        stock = x.Quantity;
                    }
                }
                if (item.Dimension == 2) {
                    var selecteds = $(".item-attribute li[class='item-selected']");
                    if (selecteds.length != 2) {
                        $(".item-attribute").addClass("item-attention");
                        return false;
                    } else {
                        var tempId = [];
                        $.each(selecteds, function (i, n) {
                            var code = $(n).attr("data-valuecode");
                            tempId.push(code);
                        });
                        var temp = $.Enumerable.From(item.Variants).Where(function (o) {
                            return o.Code == tempId.toString();
                        }).FirstOrDefault();
                        if (temp != undefined && temp != null) {
                            guid = temp.Id;
                            stock = temp.Quantity;
                        }
                    }
                }
                if (quantity > stock) {
                    alert('数量不对');
                    return false;
                }
                //debugger;
                var url = $.format('{0}/add/{1}?id={2}&qty={3}&callback=?', Sk.Domain.Cart, id, guid, quantity);
                $.getJSON(url, function (result) {
                    if (result.Status == true) {
                        Sk.Cart.RenderMiniCart();
                    }
                });
                return false;
            });

            $(".item-tabs .trigger").click(function (e) {
                var sec = $(e.target).parent();
                if (!sec.hasClass("active")) {
                    $("li.active").removeClass("active");
                    sec.addClass("active");
                }
            });
        });
        
       
    </script>
    <script type="text/javascript">
        $(function () {
            $('.item-gallery').jqzoom();
            $('#item-gallery-thumb').slides({
                generateNextPrev: true, generatePagination: false
            });
        }); </script>
}
@section css
{
    @Url.Sk().StaticCss("jquery.jqzoom")
    <style type="text/css">
        .item-attribute { border: #FFF 1px solid; font-size: 12px; }
        .item-attention { border-color: #FF6801; }
        .item-attribute dl { color: #404040; }
        .item-attribute dl dt { float: left; margin-top: 4px; text-align: right; width: 62px; }
        .item-attribute dl dd { float: left; width: 338px; }
        .item-attribute dl dd ul { }
        .item-attribute dl dd ul li { background-color: #FFFFFF; float: left; line-height: 20px; margin: 0 4px 4px 0; padding: 1px; vertical-align: middle; position: relative; }
        .item-attribute dl dd ul li i { display: none; }
        .item-attribute dl dd ul li.item-selected i { background-image: url("http://img01.taobaocdn.com/tps/i1/T1krl0Xk8zXXXXXXXX-194-382.png"); background-repeat: no-repeat; background-position: -41px -97px; display: block; position: absolute; bottom: 2px; right: 2px; height: 12px; text-indent: -9999em; width: 12px; }
        .item-attribute dl dd ul li.item-out-of-stock a, .item-attribute dl dd ul li.item-out-of-stock a:hover { border: 1px dashed #D6D6D8; color: #CDCDCD; cursor: not-allowed; margin: 0; }
        
        .item-attribute dl dd ul li.item-selected a, .item-attribute dl dd ul li a:hover { margin: -1px; border: 2px solid #C30008; }
        .item-attribute dl dd ul li a { background-color: #FFFFFF; border: 1px solid #C8C9CD; color: #000000; display: block; min-width: 10px; padding: 0 6px; text-align: center; text-decoration: none; white-space: nowrap; width: auto !important; }
        
        
        .cart-box { width: 450px; left: 200px; top: 200px; padding: 4px; }
        .cart-box-shadow { position: absolute; left: 0px; margin: 4px 0 0 4px; background: none repeat scroll 0 0 #E5E5E5; }
        .cart-box-content { position: absolute; left: -4px; border: solid 1px red; z-index: 1; }
        
        .item-detail { border: 1px solid #DCDFE5; padding: 1px; }
        .item-tabs { position: relative; height: 200px; width: 400px; list-style: none; padding-left: 20px; padding-top: 5px; background: green; overflow: hidden; }
        .item-tabs .section { float: left; }
        .item-tabs .trigger { display: inline-block; height: 20px; line-height: 20px; padding: 1px 10px; margin-left: 5px; color: #000; background: #00FF7F; text-align: center; text-decoration: none; }
        .item-tabs .active .trigger { padding-bottom: 8px; /* panel.top - parent.padding-top - tigger.height */ color: #fff; background: #a9ea00; }
        .item-tabs .panel { display: none; position: absolute; width: 420px; /* parent.width+ parent.padding-left*/ height: 175px; /* parent.height +  padding-top - tabs.top */ top: 30px; left: 0px; color: #000; background: #a9ea00; }
        .item-tabs .active .panel { display: block; }
    </style>
}
